<template>
	<view class="register-container">
		<view class="logo-content align-center justify-center flex">
			<image class="title" src="../static/images/font/register.png" mode="widthFix"></image>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<image class="my-icon my-icon-user" src="../static/images/icon/user.png" mode="aspectFit"></image>
				<input v-model="registerForm.username" type="text" :placeholder-style="'color:'+green" class="input"
					placeholder="用户名" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<image class="my-icon my-icon-email" src="../static/images/icon/email.png" mode="aspectFit"></image>
				<input v-model="registerForm.email" type="email" :placeholder-style="'color:'+green" class="input"
					placeholder="邮件箱号码" />
			</view>
			<view class="input-item flex align-center">
				<image class="my-icon my-icon-password" src="../static/images/icon/Vector.png" mode="aspectFit"></image>
				<input v-model="registerForm.password" type="password" class="input" :placeholder-style="'color:'+green"
					placeholder="密码" maxlength="20" />
			</view>
			<view class="input-item flex align-center">
				<image class="my-icon my-icon-confirmPassword icon" src="../static/images/icon/Vector.png" mode="aspectFit">
				</image>
				<input v-model="registerForm.confirmPassword" type="password" class="input" :placeholder-style="'color:'+green"
					placeholder="确认密码" maxlength="20" />
			</view>
			<!-- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @tap="getCode" class="login-code-img"></image>
        </view>
      </view> -->
			<view class="xieyi text-center flex" @tap="xieyi = !xieyi">
				<text :class="'icon-xieyi ' + (xieyi ? 'cuIcon-roundcheckfill' : 'cuIcon-roundcheck')"></text>
				<text @tap="" class="text-xieyi">查看并同意《使用条款》和《隐私声明》</text>
			</view>
			<view class="action-btn">
				<button @tap="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
				<view class="login-box flex">
					<view class="text">已有账号?</view>
					<view @tap="handleUserLogin" class="login-btn">登录</view>
				</view>
			</view>
		</view>
		<!-- <view class="xieyi text-center">
      <text @tap="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view> -->
	</view>
</template>

<script>
	import {
		register
	} from '@/api/login'

	export default {
		data() {
			return {
				green: "#00E98E",
				// codeUrl: "",
				// captchaEnabled: true,
				xieyi: false,
				globalConfig: getApp().globalData.config,
				registerForm: {
					username: "",
					password: "",
					confirmPassword: "",
					email: "",
					// code: "",
					// uuid: ''
				}
			}
		},
		methods: {
			// 用户登录
			handleUserLogin() {
				this.$tab.navigateTo(`/pages/login`)
			},
			// 注册方法
			async handleRegister() {
				if (this.registerForm.username === "") {
					this.$modal.msgError("请输入用户名")
				} else if (this.registerForm.email === "") {
					this.$modal.msgError("请输入邮箱")
				} else if (this.registerForm.password === "") {
					this.$modal.msgError("请输入密码")
				} else if (this.registerForm.confirmPassword === "") {
					this.$modal.msgError("请再次输入密码")
				} else if (this.registerForm.password !== this.registerForm.confirmPassword) {
					this.$modal.msgError("两次输入的密码不一致")
				} else if (!this.xieyi) {
					this.$modal.msgError("请勾选协议")
				}
				// else if (this.registerForm.code === "" && this.captchaEnabled) {
				// 	this.$modal.msgError("请输入验证码")
				// }
				else {
					this.$modal.loading("注册中，请耐心等待...")
					this.register()
				}
			},
			// 用户注册
			async register() {
				register(this.registerForm).then(res => {
					this.$modal.closeLoading()
					const username = this.registerForm.username
					const password = this.registerForm.password
					uni.showModal({
						title: "系统提示",
						content: "恭喜你，您的账号 " + username + " 注册成功！",
						success: function(res) {
							if (res.confirm) {
								uni.setStorageSync('username', username);
								uni.setStorageSync('password', password);
								uni.redirectTo({
									url: `/pages/login`
								});
							}
						}
					})
				}).catch((err) => {
					this.$modal.closeLoading()
					this.$modal.msgError(err)
				})
			},
			// 注册成功后，处理函数
			registerSuccess(result) {
				// 设置用户信息
				// this.$store.dispatch('GetInfo').then(res => {
				// })
				this.$tab.reLaunch('/pages/index')
			}
		}
	}
</script>

<style lang="scss">
	$green: #00E98E;

	page {
		background-image: url("../static/images/background/2.register2.jpg");
		background-size: cover;
		padding-top: 19.7vh;
	}

	.register-container {
		width: 100%;
		font-weight: bold;
		color: #555;

		.logo-content {
			width: 100%;
			text-align: center;
			position: relative;

			.title {
				width: 46%;
				height: 150upx;
				left: 8upx;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20upx auto;
			margin-top: 5.4vh;
			width: 76%;

			.input-item {
				margin: 2.5vh auto;
				background-color: #ffffffd9;
				height: calc(45upx + 4.1vh);
				border-radius: 18upx;
				// border: 4upx solid #40eb94d9;
				border: 4upx solid $green;

				.my-icon {
					width: 32upx;
					height: 32upx;
					margin-left: 25upx;
				}

				.input {
					width: 100%;
					font-size: 26upx;
					color: #4cd399;
					text-align: left;
					padding-left: 32upx;
				}
			}

			.xieyi {
				height: 30upx;
				font-size: 23upx;
				color: #555;
				align-items: center;

				.icon-xieyi {
					font-size: 32upx;
					margin-right: 8upx;
					font-weight: initial;
				}

				.cuIcon-roundcheck {
					color: #aaa;
				}

				.cuIcon-roundcheckfill {
					color: $green;
				}
			}

			.action-btn {
				margin-top: 5.2vh;

				.register-btn {
					font-size: 28upx;
					font-weight: initial;
					background: #03D482;
					height: 90upx;
					height: calc(40upx + 3vh);
				}

				.login-box {
					margin-top: 1vh;
					align-items: center;
					justify-content: center;

					.text {
						font-size: 24upx;
						margin-left: 65upx;
						margin-right: 20upx;
					}

					.login-btn {
						font-size: 32upx;
						font-weight: bold;
						color: #03D482;
					}
				}
			}

			.reg {
				margin-top: 15px;
			}

			// .xieyi {
			// 	color: #333;
			// 	margin-top: 20px;
			// }

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200upx;
				}
			}
		}
	}
</style>